
<template>
  <div>

    <div>
      <div  style="background-color: #f1f2f5; width: 100%; height: 700px;">

        <div style="background-color: #f1f2f5; width: 100%; height: 30px;"></div>
        <!--  带条件查询-->
        <div style="background-color: #fdfdfd; width: 1200px; height: 150px; margin: 0 auto;">
          <div style="display: flex; align-items: center; margin-bottom: 20px;justify-content: center;">
            <el-row style=" margin-top: 30px;">
              <span style="margin-right: 35px;">作业编号：</span>
              <el-input v-model="DriverJobDto.id" placeholder="请输入作业编号" :style="{ width: '200px', marginRight: '20px' }"></el-input>
              <span style="margin-right: 35px;">司机姓名：</span>
              <el-input v-model="DriverJobDto.driver_name" placeholder="请输入司机姓名" :style="{ width: '200px', marginRight: '20px' }"></el-input>

              <span style="margin-left: 35px; margin-right: 40px;">作业状态：</span>
              <el-select v-model="DriverJobDto.status" placeholder="请选择" :style="{ width: '250px' }">
                <el-option v-for="item in DriverJobStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-row>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 20px;justify-content: center;">
            <el-row>
              <span style="margin-right: 20px;">运输任务编号：</span>
              <el-input v-model="DriverJobDto.task_transport_id" placeholder="请输入运输任务编号" :style="{ width: '200px', marginRight: '20px' }"></el-input>
              <el-button style="margin-right: 20px; background-color: #df5536; width: 90px; color: white;" @click="ConditionalSearch" >搜索</el-button>
              <el-button style="width: 90px; margin-right: 550px;">重置</el-button>
            </el-row>
          </div>


        </div>

        <div style="background-color: #f1f2f5; width: 100%; height: 30px;"></div>

        <!--司机作业表格-->
        <div style="background-color: #fdfdfd; width: 1200px; height: 450px; margin-left: auto; margin-right: auto;">
          <!--表格-->
          <el-table
            :data="DriverJobVoList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            stripe
            height="400"
            style="width: 100%; display: inline-block; text-align: left;">
            <el-table-column
              prop="id"
              label="作业编号"
              width="150">
            </el-table-column>

            <el-table-column
              prop="driverName"
              label="司机姓名"
              width="150">
            </el-table-column>

            <el-table-column
              prop="operationsCenter"
              label="所属转运中心"
              width="180">

            </el-table-column>

            <el-table-column
              prop="licensePlateNumber"
              label="车牌号码"
              width="120">
            </el-table-column>

            <el-table-column
              prop="plan_departure_time"
              label="计划发车时间"
              width="180">
            </el-table-column>

            <el-table-column
              prop="actual_arrival_time"
              label="实际到达时间"
              width="180">
            </el-table-column>

            <el-table-column
              prop="task_transport_id"
              label="运输任务编号"
              width="140">
            </el-table-column>

            <el-table-column
              prop="status"
              label="作业状态"
              width="100">
              <template v-slot="{ row }">
                {{ ConvertDriverJobStatus(row.status) }}
              </template>
            </el-table-column>


          </el-table>
          <!--分页-->
          <div class="block" style="margin: 0 auto; text-align: center;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="DriverJobVoList.length">
            </el-pagination>
          </div>

        </div>

      </div>
    </div>




  </div>
</template>

<script>

import {ObtainAllDriverAssignmentsWithConditions} from "../../api/driver/driver";

export default {
  name: 'app',
  data() {
    return {
      dialogVisible: false,//查看地图弹框
      pageSize: 10,//每页显示最大条数
      currentPage: 1,//当前页数
      DriverJobVoList: [],//司机作业信息集合

      DriverJobStatus: [
        {
          value: '1',
          label: '待提货'
        }, {
          value: '2',
          label: '在途'
        }, {
          value: '3',
          label: '已交付'
        }, {
          value: '4',
          label: '已交付'
        }, {
          value: '5',
          label: '已作废'
        }],//司机作业状态下拉框


      DriverJobDto: {//司机作业查询条件
        id: '',//司机作业id查询条件
        driver_name: '',//司机名称
        status : '',//司机作业状态查询条件
        task_transport_id: ''//任务运输编号

      },
      DriverJobVo:[]
    };
  },
  methods: {

    //转换司机作业状态
    ConvertDriverJobStatus(value) {
      switch (value) {
        case 1:
          return '待提货';
        case 2:
          return '在途';
        case 3:
          return '已交付';
        case 4:
          return '已交付';
        case 5:
          return '已作废';

        default:
          return '其他状态';
      }
    },

    //最大页数监听事件
    handleSizeChange(val) {
      this.pageSize = val
      console.log(`每页 ${val} 条`);
    },
    //当前页监听事件
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`);
    },
    //搜索点击事件
    ConditionalSearch(){
      ObtainAllDriverAssignmentsWithConditions(this.DriverJobDto).then(response =>{
        this.DriverJobVoList = response;
        console.log(this.DriverJobVoList);

      })
    }
  },

  async created() {

    //查询所有司机作业信息
    ObtainAllDriverAssignmentsWithConditions(this.DriverJobDto).then(response =>{
      this.DriverJobVoList=response
      console.log(this.DriverJobVoList);
    })

  }

};
</script>

